

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import styles from './styles';

interface SettingItemProps {
  icon: string;
  iconColor: string;
  iconBackgroundColor: string;
  title: string;
  description: string;
  isEnabled: boolean;
  onToggle: () => void;
}

const SettingItem: React.FC<SettingItemProps> = ({
  icon,
  iconColor,
  iconBackgroundColor,
  title,
  description,
  isEnabled,
  onToggle,
}) => {
  return (
    <TouchableOpacity 
      style={styles.container} 
      onPress={onToggle}
      activeOpacity={0.7}
    >
      <View style={styles.leftContent}>
        <View style={[styles.iconContainer, { backgroundColor: iconBackgroundColor }]}>
          <FontAwesome6 name={icon} size={18} color={iconColor} />
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.description}>{description}</Text>
        </View>
      </View>
      
      <View style={[styles.toggleSwitch, isEnabled && styles.toggleSwitchActive]}>
        <View style={[styles.toggleThumb, isEnabled && styles.toggleThumbActive]} />
      </View>
    </TouchableOpacity>
  );
};

export default SettingItem;

